<template>
    <div :class="$style['sketchpad-wrapper']">
        <div ref="refSketchpad" :class="$style['sketchpad-panel']"></div>
        <TeleportContainer />
    </div>
</template>

<script setup>
import { onMounted, ref, watch, nextTick } from 'vue'

import { getTeleport } from '@antv/x6-vue-shape'

import { useInject } from '@/utils/workflow/workflow.event'

const TeleportContainer = getTeleport()

const props = defineProps({
    data: {
        type: Array,
        default: () => ([])
    }
})

const { getWorkflowCls } = useInject()
const refSketchpad = ref()
const render = async (data) => {
    if (!data.length) {
        return
    }
    await nextTick()

    getWorkflowCls((cls) => {
        cls.render(data)
    })
}
watch(() => props.data, (data) => {
    render(data)
})

onMounted(() => {
    getWorkflowCls((cls) => {
        cls.init({
            el: refSketchpad.value
        })
        render(props.data)
    })
})
</script>

<style lang="scss" module>
.sketchpad-wrapper {
    width: 100%;
    height: 100%;

    @include define('x6-graph-pannable', true) {
        cursor: default;
    }

    @include define('x6-widget-selection-inner') {
        border: 2px solid #5F95FF;
        border-radius: 4px;
    }

    @include define('x6-widget-selection-box') {
        padding-right: 3px;
        padding-bottom: 3px;
        margin-top: -4px;
        margin-left: -4px;
        border: 2px dashed #5F95FF;
        border-radius: 4px;
        box-shadow: none;
    }
}

.sketchpad-panel {
    width: 100%;
    height: 100%;
}
</style>
